<template>
    <div class="weather-module">
        <!--<img class="weather-img" height="30" :src='weatherimg_src'/>-->
        <!--<span> -2 /-12℃ 西风4-5级</span>-->
        <div class="right-ctrl-panel">
            <div class="weather-ctrl" @click="displayReagionWeather()">
                <img src="../../static/img/weather/sun.png" class="weather-icon">
                <span class="weather-temp">33-21°</span>
                <span class="weather-wind">东南风 / 3级</span>
                <img src="../../static/img/weather/drop_down.png" class="drop-ctrl">
            </div>
        </div>
    </div>
</template>

<script>
    import * as globals from '../global/index'
    import * as config from '../config/index'
    import env from '../global/env'
    import  weather_api from '../api/region_weather_api'
    import {mapGetters} from 'vuex'

    export default{

        data(){
            return {
                weather_map_visible: false,
                weather_map_source_added: false,
                weatherimg_src: 'static/img/weather.png',
            }
        },
        mounted(){
            var that = this
            $("weather-ctrl").append(that.weatherHeader())
            that.setCookie("weatherDataFlag", true, 30)
            setInterval(function () {
                var weatherFlag = that.getCookie("weatherDataFlag")
                if (weatherFlag == "true") {
                    //异步请求不会在这里返回结果的
//                  weather_api.getWeatherForecast()
                    that.$store.dispatch('getRegionsWeatherCollection')
                    console.log(">>>>>>>>>>>>>WEATHER_request>>>>>>>>>>>>>>>>")
                }
            }, 10000)
        },

        methods: {
            weatherHeader(headerInfo){
                return '<img src="../../static/img/weather/sun.png" class="weather-icon">\
                <span class="weather-temp">33-21°</span>\
                <span class="weather-wind">东南风 / 3级</span>\
                <img src="../../static/img/weather/drop_down.png" class="drop-ctrl">';
            },
            weatherContent(contentInfo){
                return '<div class="weather-content">\
            <img src="images/weather/weather.png">\
            </div>';
            },
            getRegionWeatherDetail(regionName){
                var that = this
                var weatherType = "Cloudy"
                var regionPropertys = this.allRegionWeathers[regionName + "12"]
                console.log(`--------获取天气细节---------${regionName}`)
                if(regionPropertys){
                    console.log(regionPropertys)
                    weatherType = regionPropertys.weather.split(",")[1]
                }else {
                    regionPropertys = this.allRegionWeathers["达尔罕茂明安联合旗12"]
                    if(regionPropertys){
                        weatherType = regionPropertys.weather.split(",")[1]
                        console.log(`NO this --${regionName}`)
                    }
                }
                return weatherType
            },
            displayReagionWeather(){
                var that = this
                var weatherType = "Cloudy"//暂时默认是0，后面直接加入rain等
                //判断所有区域的source是否添加了，若没添加source则添加
                if (!this.weather_map_source_added) {
                    this.weather_map_source_added = true
                    this.weather_map_visible = true
                    config.region_weathers.forEach(function (region) {
                        weatherType = that.getRegionWeatherDetail(region.name_zh)
                        weather_api.addBaotouRegionAndPointSource(env.map, region, weatherType)
                    })
                }
                //在已经添加了source的情况下只需要控制visibility
                else {
                    //判断区域图层是否可见，若可见则设置不可见，相反也是
                    if (!this.weather_map_visible) {
                        this.weather_map_visible = true
                        config.region_weathers.forEach(function (region) {
                            env.map.setLayoutProperty(`${region.name}_administrate_point_layer`, "visibility", 'visible')
                            env.map.setLayoutProperty(`${region.name}_administrate_polygon_layer`, "visibility", 'visible')
                        })
                    } else {
                        this.weather_map_visible = false
                        config.region_weathers.forEach(function (region) {
                            env.map.setLayoutProperty(`${region.name}_administrate_point_layer`, "visibility", 'none')
                            env.map.setLayoutProperty(`${region.name}_administrate_polygon_layer`, "visibility", 'none')
                        })
                    }
                }
            },
            setCookie(cname, cvalue, exdays){
                var d = new Date();
                //d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                d.setTime(d.getTime() + (exdays * 1000));

                var expires = "expires=" + d.toGMTString();
                document.cookie = cname + "=" + cvalue + "; " + expires;
            },
            getCookie(cname){
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i].trim();
                    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
                }
                return "";
            },
            updateRegionWeather(){
                var that = this
                console.log("---------updateRegionWeather-------------")
                if (this.weather_map_visible){
                    config.region_weathers.forEach(function (region) {
                        var weatherType = that.getRegionWeatherDetail(region.name_zh)
                        env.map.setLayoutProperty(`${region.name}_administrate_point_layer`, "icon-image",weatherType)
                        console.log(`${region.name}:${weatherType}`)
                    })
                    console.log("------new weather get Done-----------")
                }
            },
        },
        computed: {
            ...mapGetters({
                allRegionWeathers: "allRegionWeathers"
            }),
        },

        watch: {
            allRegionWeathers: "updateRegionWeather",
//            weather_map_visible: "updateRegionWeather",
        },


    }
</script>


<style scoped>

    .right-ctrl-panel {
        width: 170px;
        position: fixed;
        top: 5px;
        right: 0;
        height: 39px;
        z-index: 2;
        background-color: white;
    }

    .weather-content {
        position: fixed;
        top: 45px;
        right: 130px;
        width: 172px;
        z-index: 2;
        background-color: white;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
    }

    .weather-content > img {

    }

    .weather-ctrl {
        height: 39px;
        width: 170px;
        float: left;
        font-size: 12px;
        border: 1px solid #dcdcdc;
        text-align: center;
        padding-top: 6px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .weather-icon {
        width: 25px;
        height: 25px;
        vertical-align: middle;
    }

    .weather-temp {
        vertical-align: middle;
    }

    .weather-temp {
        vertical-align: middle;
    }

    .weather-wind {
        vertical-align: middle;
    }

    .weather-module {
        position: absolute;
        top: 10px;
        right: 0;
        width: 150px;
        height: 30px;
        font-size: 12px;
        background-color: white;
    }

    .weather-module * {
        vertical-align: middle;
    }
</style>
